<template>
  <transition name="slideInRight">
    <div class="playStrategyList-wrapper">
      <v-header title="游记攻略" ref="header">
        <x-icon slot="right" @click="showSearch = true" type="ios-search-strong" size="28" style="fill:#fff;"></x-icon>
      </v-header>

      <scroll :data="travelsList" style="overflow: hidden;"
        ref="scroll"
        :bounce="false"
        :probeType="3"
        :listenScroll="true"
        @scroll="scroll"
        :pullDownRefresh="true"
        :pullUpLoad="true"
        @pullingDown="onPullingDown"
        @pullingUp="onPullingUp">
        <div class="travels">
          <div v-for="item in travelsList" :key="item.id" class="item" @click="toDetail(item.id, item.articleType)">
            <div class="travels-top">
              <div style="width: 48.5%">
                <p class="title">{{item.title}}</p>
                <p class="desc" v-if="item.articleType == 0">{{item.intro}}</p>
                <div v-else class="people">
                  <img class="avatar" v-lazy="item.userHeadUrl" />
                  <span class="nickname">{{item.userName}}</span>
                  <span style="max-width: 55px; overflow: hidden;">在
                    <b>{{item.addressName}}</b>
                  </span>
                </div>
              </div>
              <div class="img" v-lazy:backgroundImage="item.firstImg" style="width: 48.5%"></div>
            </div>
            <div class="travels-bottom">
              <p class="travels-type" :class="{primary: item.articleType == 0}">{{item.articleType == 0 ? '游记' : '攻略'}}</p>
              <p>
                <b>{{item.browseCount}}</b> 浏览
                <b>·</b>
                <template v-if="item.articleType == 0">
                  <b>{{item.commentCount}}</b> 评论
                </template>
                <template v-else>
                  <b>{{item.collectionSum}}</b> 收藏
                </template>
              </p>
            </div>
          </div>
        </div>
      </scroll>

      <!-- 搜索 -->
      <global-search v-model="showSearch" type="strategy" :range="[4, 5]"></global-search>

      <!-- 选择发送类型 -->
      <div v-transfer-dom>
        <popup v-model="showSelectType" position="top" width="100%" class="popup-wrapper">
          <div class="select-type">
            <div :style="{height: paddingTop + 10 + 'px'}" style="background: #333;"></div>
            <div style="background: #fff; padding-bottom: 20px;">
              <div style="display: flex; justify-content: flex-end;">
                <i class="fa fa-times" @click="showSelectType = false" aria-hidden="true" style="font-size: 21px; padding: 5px; color: #555; margin: 3px 10px 3px;"></i>
              </div>
              <div class="row">
                <div class="item" @click="sendDynamic(0)">
                  <img :src="defaultAvatar"/>
                  <p>游记</p>
                </div>
                <div class="item">
                  <img :src="defaultAvatar" @click="sendDynamic(1)"/>
                  <p>攻略</p>
                </div>
              </div>
            </div>
          </div>
        </popup>
      </div>

      <div ref="plus" class="plus" @click="clickPlus" :style="{bottom: paddingBottom + 50 + 'px'}">
        <x-icon class="icon" type="ios-plus-empty" size="32"></x-icon>
      </div>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import GlobalSearch from '@/components/global-search/global-search'
import { TransferDom, Popup } from 'vux'

import animations from 'create-keyframe-animation'
import { isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'
import defaultAvatar from '@/assets/img/default_avatar.png'
import { handleBackMixin } from '@/assets/js/mixin'

export default {
  name: 'strategyList',
  mixins: [handleBackMixin],
  data() {
    return {
      showSearch: false,
      showSelectType: false,
      defaultAvatar,
      seachValue: '',
      searchList: [],
      travelsList: [],
      allPopupModels: ['showSearch', 'showSelectType']
    }
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader, Scroll, Popup, GlobalSearch
  },
  created() {
    this.paddingTop = 24
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingTop = 34
      this.paddingBottom = 24
    }
    this.pageNum = 1

    animations.registerAnimation({
      name: 'rotateOut',
      animation: [
        {
          transform: 'translate(-50%, 0)'
        },
        {
          transform: 'translate(-50%, ' + (this.paddingBottom + 100) + 'px)'
        }
      ],
      presets: {
        duration: 800,
        resetWhenDone: true
      }
    })
    animations.registerAnimation({
      name: 'rotateIn',
      animation: [
        {
          transform: 'translate(-50%, ' + (this.paddingBottom + 100) + 'px)'
        },
        {
          transform: 'translate(-50%, 0)'
        }
      ],
      presets: {
        duration: 800,
        resetWhenDone: true
      }
    })

    this._getPlayStrategList()
  },
  mounted () {
    this.$refs.scroll.$el.style.height = window.innerHeight - this.$refs.header.$el.clientHeight + 'px'
  },
  methods: {
    _getPlayStrategList() {
      const _self = this
      axios.get(this, '/v1/playStrategy', {
        pageNum: this.pageNum
      }, (data) => {
        if (data.length === 0) {
          if (_self.pageNum > 0) {
            if (_self.$refs.scroll) {
              _self.pageNum--
              _self.$refs.scroll.hiddenPullUpLoad()
            }
          } else {
            _self.$refs.scroll.hiddenPullDown()
          }
          return
        }
        if (_self.pageNum <= 1) {
          _self.travelsList = data
        } else {
          _self.travelsList = _self.travelsList.concat(data)
        }
      })
    },
    scroll(position, directionY) {
      if (this.showPlus && directionY > 0) {
        animations.runAnimation(this.$refs.plus, 'rotateOut', () => {
          this.showPlus = false
        })
      } else if (!this.showPlus && directionY < 0) {
        animations.runAnimation(this.$refs.plus, 'rotateIn', () => {
          this.showPlus = true
        })
      }
    },
    onPullingDown() {
      this.pageNum = 1
      this._getPlayStrategList()
    },
    onPullingUp() {
      this.pageNum++
      this._getPlayStrategList()
    },
    toDetail(id, type) {
      type === 1 ? this.$router.push('/address/strategy/' + id) : this.$router.push('/address/travels/' + id)
    },
    clickPlus () {
      const user = localUser.get()
      if (user == null || user.id == null) {
        this.$router.push('/login')
        return
      }
      if (user.local === 1 || user.local === '1') {
        this.showSelectType = true
      } else {
        this.$router.push(`/address/travelsEdit/0`)
      }
    },
    sendDynamic (type) {
      const user = localUser.get()
      if (user == null || user.id == null) {
        this.$router.push('/login')
        return
      }
      this.showSelectType = false
      this.$router.push(`/address/travelsEdit/${type}`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl';

.playStrategyList-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0px;
  background-color: $color-background;
  z-index: 102;

  .travels {
    background: #fff;
    .item {
      margin: 0 15px;
      padding: 15px 0;
      border-bottom: 1px solid #f8f8f8;
      .travels-top {
        display: flex;
        justify-content: space-around;
        line-height: 1.3;
        .title {
          font-size: $font-size-title;
          font-weight: bold;
          min-height: 60px;
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 3
          -webkit-box-orient vertical
        }
        .desc {
          margin-top: 8px;
          font-size: $font-size-desc;
          color: #666;
          overflow hidden
          text-overflow ellipsis
          display -webkit-box
          -webkit-line-clamp 2
          -webkit-box-orient vertical
        }
        .people {
          display: flex;
          align-items: center;
          margin-top: 12px;
          font-size: $font-size-desc;
          .avatar {
            width: 28px;
            height: 28px;
            border-radius: 50%;
          }
          .nickname {
            overflow : hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            padding: 0 6px;
          }
        }
        .img {
          height: 110px;
          background-size: cover;
          background-position: center;
          background-repeat: no-repeat;
        }
      }
      .travels-bottom {
        display: flex;
        justify-content: space-between;
        font-size: $font-size-small;
        align-items: center;
        margin-top: 9px;
        .travels-type {
          padding: 3px 5px;
          border-radius: 2px;
          line-height: 1;
          border: 1px solid $color-theme-1;
          color: $color-theme-1;
        }
        .primary {
          border: 1px solid $color-theme;
          color: $color-theme;
        }
      }
    }
  }

  .plus {
    position: absolute;
    bottom: 75px;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    z-index: 201;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    background: $color-theme;
    display: inline-block;
    box-shadow: 0 0 8px $color-theme;
    .icon {
      fill: #fff;
      margin-top: 5px;
    }
  }
}

.popup-wrapper {
  background: #fff;
  .select-type {
    .row {
      display: flex;
      justify-content: space-around;
      .item {
        width: 100px;
        text-align: center;
        margin-bottom: 12px;
        img {
          width: 50px;
          height: 50px;
        }
        p {
          margin-top: -5px;
        }
      }
    }
  }

  .search-list {
    padding: 15px;
    list-style: none;
    line-height: 1.6;

    li {
      border-bottom: 1px solid $color-border;
      padding: 5px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .name {
      font-weight: bold;
      width: calc(100% - 55px)
    }
    .travels-type {
      width: 40px;
      font-size: $font-size-small;
      padding: 3px 0;
      text-align: center;
      border-radius: 2px;
      line-height: 1;
      border: 1px solid $color-theme-1;
      color: $color-theme-1;
    }
    .primary {
      border: 1px solid $color-theme;
      color: $color-theme;
    }
  }
}
</style>
